/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Button, Text, useTheme,} from "customize-easy-ui-component";
import {RepLink, ReportViewProps,} from "../../common/base";
import {末尾链接, 落款单位地址,} from "../../common/rarelyVary";
import {useRepMenuDirItems} from "../../hook/useMainRepUrlOr";
import {useItemsMapPressure} from "../../common/pressure";
import {Projects记录 } from "./Regular.O-1";
import {ReportFirstPageHeadNmaNmbm} from "../../contain/rarelyVary";
import {首页设备概况AnnuWt,} from "./rarelyVary";
import {AppendixPageVw} from "./AppendixPage";
import {注意事项IndPl} from "../../industrial/rarelyVary";
import queryString from "query-string";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";
import {FormatOriginal} from "./FormatOriginal";
import {AttachedPageVw} from "./AttachedPage";
import {ConclusionVw} from "./Conclusion";
import {编制审核Utili} from "../../gas/utilityNj/viewRes";


export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,  source: orc,  verId,rep,
}) => {
    const qs= queryString.parse(window.location.search);
    const formatOriginal =qs && !!qs.original;      //改成  格式化版原始记录
    const { history } = useContext(RoutingContext);
    const Component=formatOriginal? FormatOriginal : OfficialReport;
    return (<>
        <Component  source={orc} verId={verId} repId={repId} rep={rep}/>
        <div css={{margin: '0.5rem', "@media print": {display: 'none'} }}>
            <Button intent="danger" variant="outline"
                    onPress={async () => {
                        qs.original =formatOriginal? '' : '1';
                        history.location.search = queryString.stringify(qs);
                        const toUrl= history.createHref(history.location);
                        history.push(toUrl);
                    }}>{formatOriginal? '正式报告':'格式化版原始记录'}
            </Button>
        </div>
    </>);
}

export const OfficialReport: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
  const theme= useTheme();
    const [mapFxian]=useItemsMapPressure({ projects:orc.Projects });
    const [rootMenu]=useRepMenuDirItems(Projects记录, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
  return (
    <React.Fragment>
        {rootMenu}
        <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
            <div css={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                "@media print": {height: '100vh', pageBreakInside: 'avoid',}
            }}>
                {ReportFirstPageHeadNmaNmbm({theme, rep})}
                <div>
                    <Text variant="h3" css={{textAlign: 'center',
                        "@media (min-width:690px),print and (min-width:538px)": {fontSize: theme.fontSizes[6],}
                    }}>压力容器年度委托检查报告<br/>
                    </Text>
                    {/*<br css={{"@media not print": {display: 'none'}}}/>*/}
                    <Text variant="h6" css={{textAlign: 'center',}}>（ FJB/RH-10191-0-2019 ）</Text>
                </div>
                <div>{首页设备概况AnnuWt({theme, orc, rep})}</div>
                <div css={{textAlign: 'center', "@media print": {pageBreakInside: 'avoid'}}}>
                    {落款单位地址}
                </div>
            </div>
            {注意事项IndPl({
                rep,
                comply: '书为依据《固定式压力容器安全技术监察规程》（TSG 21-2016）、 《特种设备使用管理规则》（ TSG08-2017）制定，适用于固定式压力容器进行年度检查的报告，检验结论仅代表该设备在检验时的安全状况'
            })}
            {/*{目录页VS({theme, orc, rep})}*/}

            <ConclusionVw orc={orc} rep={rep}/>
            {编制审核Utili({theme, orc, rep, bcap: '检查'})}
            <AppendixPageVw orc={orc} rep={rep}/>

            {mapFxian.get('附页附图')?.do && <>
                <AttachedPageVw table={'附页表'} orc={orc} rep={rep} title={'压力容器年度检查报告'} tmcap='检查'/>
                <RepLink ori rep={rep} tag={'AttachedPage'}>
                    <Text id={'AttachedPage'} variant="h4" css={{textAlign: 'center', marginTop: '1rem', "@media print": {display: 'none'},
                    }}>附页-附图附件的上传</Text>
                </RepLink>
            </> }
        </div>
        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}
